<template>
  <div>
    <div>
      <div class="nav">
        <el-divider style="font-weight:900;width:80px;font-size:20px" content-position="left">基本信息</el-divider>
        <el-form ref="ruleForm" :model="CreateEmployeeInput" :rules="rules" label-position="right" label-width="90px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="登录账号" prop="phoneNumber">
                <el-input v-if="this.$route.query.id" v-model="CreateEmployeeInput.phoneNumber" disabled size="small" style="width:390px" />
                <el-input v-else v-model="CreateEmployeeInput.phoneNumber" size="small" style="width:390px" />
                <span style="font-size:12px;margin-left:12px;color:#828282">员工使用此手机号作为账号登陆后台</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item style="font-size:16px;color:red" label="员工姓名" prop="name" :rules="{ required: true,message :'请输入',trigger:'blur'}">
                <el-input v-model="CreateEmployeeInput.name" :disabled="flag" prop="idCardTypeCode" size="small" style="width:390px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="证件类型" prop="idCardTypeCode">
                <el-select v-model="CreateEmployeeInput.idCardTypeCode" :disabled="flag" size="mini">
                  <el-option v-for="item in dict.idCardType" :key="item.code" :disabled="flag" :label="item.value" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item prop="idCardNumber" label="证件号码" style="display:inline-block" :rules="CreateEmployeeInput.idCardTypeCode === 'IdCard' ? rules.idCard : rules.unIdCard">
                <el-input v-model="CreateEmployeeInput.idCardNumber" :disabled="flag" style="width:230px" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="头像">
                <div class="photoCropper img_box" style="display:flex">
                  <photo-cropper-dialog
                    ref="photoCropper"
                    :photograph="true"
                    auto-crop-width="160px"
                    auto-crop-height="160px"
                    :fixed-number="[400, 400]"
                    :enlarge="1"
                    @photoCropperSave="photoCropperSave"
                  />
                  <div class="upload_game_img" @click="openPhotoCropper()">
                    <img v-if="CreateEmployeeInput.avatarUrl" class="show_img" :src="getStaticPhotoUrl(CreateEmployeeInput.avatarUrl)" @error="errorPhoto">
                    <i v-if="!CreateEmployeeInput.avatarUrl" class="el-icon-plus" />
                  </div>
                  <div class="imgText">
                    <p>文件格式: .jpg.png.jpeg...</p>
                    <p>建议尺寸160*160px，图片小于5M</p>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="inputRight">
            <el-col>
              <el-form-item label="描述">
                <el-input v-model="CreateEmployeeInput.description" size="small" style="width:390px" maxlength="30" show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div style="margin-top:20px">
      <div style="display:flex;margin-top:20px">
        <el-divider style="font-weight:900;width:80px" content-position="left">岗位标签</el-divider>
      </div>
      <div style="display:flex;flex-wrap:wrap">
        <div v-for="(item,index) in employees " :key="index" shadow="never" style="background:#f5f8ff;width:294px;margin-bottom:10px;min-height:95px;margin-right:10px;border-radius:6px">
          <div slot="header" class="clearfix" style="display:flex;align-items:flex-start;margin-top:10px;height:19px">
            <p style="width:210px;height:16px;margin-left:12px;display:flex">
              <span class="iconfont icon_biaoqian" style="color:#0076CB" />
              <el-popover placement="bottom" style="color:#0076CB;font-size:16px;margin-left:9px" trigger="hover" :content="item.name">
                <span slot="reference" style="width:184px;display:inline-block" class="table_name">{{ item.name }}</span>
              </el-popover>
            </p>
            <p style="display:flex;align-items:flex-start">
              <el-checkbox v-model="checked" :label="item.id" style="margin-left:36px;padding-top:0px;color:#7A7C80;font-size:16px">{{ '' }}</el-checkbox>
            </p>
          </div>
          <div class="text item" style="margin-top:13px" @click="check(index)">
            <el-popover placement="bottom" style="color:#616161;font-size:12px;margin-left:38px;margin-top:9px" trigger="hover" :content="item.description" width="260">
              <span slot="reference" class="table_name" style="color:#999999;font-size:12px;width:230px;display:inline-block">{{ item.description }}</span>
            </el-popover>
          </div>
          <div style="margin-left:38px;color:#616161;margin-top:3px">
            <span v-for="(item1, index1) in item.employeeTagEmployeeTypes" :key="index1" style="margin-right:10px">
              <span v-if="item1.employeeTypeCode === 'Coach'" style="font-size:14px;color:#616161">{{ '教练业务' }}</span>
              <span v-if="item1.employeeTypeCode === 'Sale'" style="font-size:14px;color:#616161">{{ '销售业务' }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:20px">
      <div style="display:flex;margin-top:20px">
        <el-divider style="font-weight:900;width:80px" content-position="left">角色</el-divider>
      </div>
      <div style="display:flex;flex-wrap:wrap">
        <div v-for="(item,index) in roles " :key="index" shadow="never" style="background:#FFF9F5;width:294px;margin-bottom:10px;min-height:95px;margin-right:10px;border-radius:6px">
          <div slot="header" class="clearfix" style="display:flex;align-items:flex-start;margin-top:10px;height:19px">
            <p style="width:210px;height:18px;margin-left:12px;display:flex">
              <span class="iconfont icon_biaoqian" style="color:#ffba00" />
              <el-popover placement="bottom" style="color:#ffba00;font-size:16px;margin-left:9px" trigger="hover" width="90px" :content="item.displayName">
                <span slot="reference" style="width:184px;display:inline-block" class="table_name">{{ item.displayName }}</span>
              </el-popover>
            </p>
            <p style="display:flex;align-items:flex-start">
              <el-radio v-model="radio" :label="item.id" style="margin-left:36px;padding-top:0px;color:#7A7C80;font-size:16px">{{ '' }}</el-radio>
            </p>
          </div>
          <div class="text item" style="padding-bottom:4px;margin-top:13px" @click="checkj(index)">
            <el-popover placement="bottom" style="color:#999999;font-size:12px;margin-left:38px;margin-bottom:6px;margin-top:9px" trigger="hover" :content="item.description" width="260">
              <span slot="reference" class="table_name" style="color:#999999;font-size:12px;width:230px;display:inline-block">{{ item.description }}</span>
            </el-popover>
          </div>
          <div style="display:flex" class="btn">
            <el-button type="text" style="color:#616161;font-size:14px;margin-left:36px;" @click="permissions(item)">查看权限</el-button><el-button type="text" style="font-size:14px;color:black;margin-top:1px;color:#616161;" icon="iconfont icon_a-quanxian11" @click="permissions(item)" />
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:20px">
      <div style="display:flex;margin-top:20px;margin-bottom:16px">
        <el-divider style="font-weight:900;width:80px" content-position="left">状态</el-divider>
      </div>
      <el-radio v-model="CreateEmployeeInput.isEnabled" :label="true">启用</el-radio>
      <el-radio v-model="CreateEmployeeInput.isEnabled" :label="false" style="margin-left:150px;margin-bottom:20px">禁用</el-radio>
    </div>
    <div style="margin-top:20px;margin-bottom:20px">
      <div style="display:flex;margin-top:20px;margin-bottom:16px">
        <el-divider style="font-weight:900;width:80px" content-position="left">是否授课</el-divider>
      </div>
      <el-radio v-model="CreateEmployeeInput.canTeach" :label="true">授课</el-radio>
      <el-radio v-model="CreateEmployeeInput.canTeach" :label="false" style="margin-left:150px;margin-bottom:20px">不授课</el-radio>
    </div>
    <span slot="footer" class="difooter">
      <!-- 取消按钮 -->
      <el-button size="mini" @click="close">{{ $t('button.cancel') }}</el-button>
      <!-- 编辑的保存按钮 -->
      <el-button size="mini" type="primary" :loading="addfalse" @click="addStaff('ruleForm')">确 定</el-button>
    </span>
    <Permissions ref="permiss" />
  </div>
</template>

<script>
import { api_POST_ClubEmployee, api_GET_ClubEmployeeId, api_GET_ClubEmployeeTag, api_PUT_ClubEmployeeId } from '@/extend/api/hallswaggerApi/app.js';
import { CreateEmployeeInput, Api_GET_ClubEmployeeIdQO, Api_GET_ClubEmployeeTagQO } from '@/lib/form/hall/swaggerForm';
import { api_GET_Roles } from '@/extend/api/swaggerApi/identity';
import { Api_GET_RolesQO } from '@/lib/form/swaggerForm';
import photoCropperDialog from '../photoCropperDialog';
import Permissions from './permissions.vue';
import validator from '@/lib/validate';
import defaultHotelImg from '@/assets/images/face_default.png';
import { mapState, mapActions } from 'vuex';
export default {
  components: {
    photoCropperDialog,
    Permissions
  },
  data() {
    return {
      flag: false,
      addfalse: false,
      employees: [], // 标签列表
      Api_GET_ClubEmployeeIdQO: new Api_GET_ClubEmployeeIdQO(),
      roles: [],
      defaultHotelImg: defaultHotelImg,
      Api_GET_RolesQO: new Api_GET_RolesQO(),
      CreateEmployeeInput: new CreateEmployeeInput(),
      Api_GET_ClubEmployeeTagQO: new Api_GET_ClubEmployeeTagQO(),
      state: '', // 状态
      radio: '',
      checked: [],
      formData: {
        imageUrl: ''
      },
      rules: {
        phoneNumber: [validator.required('手机号不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '输入正确手机格式'));
            },
            trigger: 'blur'
          }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCardTypeCode: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkIdNumber(value, '身份证号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        unIdCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    // console.log(this.dict);
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      this.getStaff();
    }
    // 获取角色列表
    this.Api_GET_RolesQO.MaxResultCount = 999;
    this.Api_GET_RolesQO.Sorting = 'creationTime DESC';
    api_GET_Roles(this.Api_GET_RolesQO).then(res => {
      this.roles = res.items;
      console.log(this.roles);
    }, error => {
      const _msg = error.error.message || error.message;
      this.$message({ type: 'error', message: _msg });
    });
    // 获取岗位列表
    this.Api_GET_ClubEmployeeTagQO.IncludeEmployeeTagEmployeeTypes = true; // type: boolean
    this.Api_GET_ClubEmployeeTagQO.IncludeEmployeeEmployeeTags = true; // type: boolean
    this.Api_GET_ClubEmployeeTagQO.Sorting = 'creationTime DESC';
    api_GET_ClubEmployeeTag(this.Api_GET_ClubEmployeeTagQO).then(res => {
      console.log(res);
      this.employees = res.items;
    }, error => {
      const _msg = error.error.message || error.message;
      this.$message({ type: 'error', message: _msg });
    });
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取指定员工
    getStaff() {
      this.Api_GET_ClubEmployeeIdQO.IncludeIdCardType = true;
      this.Api_GET_ClubEmployeeIdQO.IncludeEmployeeEmployeeTags = true;
      api_GET_ClubEmployeeId(this.$route.query.id, this.Api_GET_ClubEmployeeIdQO).then(res => {
        console.log(res);
        this.CreateEmployeeInput.name = res.name;
        this.CreateEmployeeInput.phoneNumber = res.phoneNumber;
        this.CreateEmployeeInput.idCardTypeCode = res.idCardTypeCode;
        if (res.idCardTypeCode === 'IdCard') {
          this.flag = true;
        } else {
          this.flag = false;
        }
        this.CreateEmployeeInput.idCardNumber = res.idCardNumber;
        this.CreateEmployeeInput.avatarUrl = res.avatarUrl;
        this.radio = res.roleId;
        this.CreateEmployeeInput.canTeach = res.canTeach;
        if (res.isEnabled === true) {
          this.CreateEmployeeInput.isEnabled = true;
        }
        if (res.isEnabled === false) {
          this.CreateEmployeeInput.isEnabled = false;
        }
        for (var i = 0; i < res.employeeEmployeeTags.length; i++) {
          this.checked.push(res.employeeEmployeeTags[i].employeeTagId);
        }
      });
    },
    // 获取静态文件
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 打开图片裁剪工具
    openPhotoCropper() {
      this.$refs['photoCropper'].open();
    },
    // 点击保存照片裁剪窗口
    photoCropperSave(fileUrl) {
      this.$set(this.CreateEmployeeInput, 'avatarUrl', fileUrl.tempUrl);
      console.log(this.CreateEmployeeInput);
    },
    // 查看权限
    permissions(item) {
      console.log(item);
      this.$refs.permiss.description = item.description;
      this.$refs.permiss.name = item.displayName;
      this.$refs.permiss.staffId = item.id;
      this.$refs.permiss.dialogVisible = true;
      this.$refs.permiss.codeList = [];
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    addStaff(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            this.CreateEmployeeInput.roleId = this.radio;
            this.CreateEmployeeInput.employeeTagIds = this.checked;
            this.addfalse = true;
            if (this.checked.length === 0) {
              this.$message({
                message: '请选择标签',
                type: 'warning'
              });
              this.addfalse = false;
              return;
            }
            if (this.radio.length === 0) {
              this.$message({
                message: '请选择角色',
                type: 'warning'
              });
              this.addfalse = false;
              return;
            }
            api_PUT_ClubEmployeeId(this.$route.query.id, this.CreateEmployeeInput).then(res => {
              this.$message({
                message: '编辑成功',
                type: 'success'
              });
              this.addfalse = false;
              this.$router.push({ 'name': 'StaffList' });
            }).catch(
              error => {
                this.addfalse = false;
                this.$message({
                  message: `编辑失败 ${error.error.message || error.message}`,
                  type: 'error',
                  showClose: true
                });
              }
            );
          } else {
            this.CreateEmployeeInput.roleId = this.radio;
            this.CreateEmployeeInput.employeeTagIds = this.checked;
            console.log(this.checked);
            console.log(this.CreateEmployeeInput);
            this.addfalse = true;
            if (this.checked.length === 0) {
              this.$message({
                message: '请选择标签',
                type: 'warning'
              });
              this.addfalse = false;
              return;
            }
            if (this.radio.length === 0) {
              this.$message({
                message: '请选择角色',
                type: 'warning'
              });
              this.addfalse = false;
              return;
            }
            api_POST_ClubEmployee(this.CreateEmployeeInput).then(res => {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.$router.push({ 'name': 'StaffList' });
              this.addfalse = false;
            }, error => {
              this.addfalse = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            }).catch(
              error => {
                this.addfalse = false;
                this.$message({
                  message: `提交失败 ${error.error.message || error.message}`,
                  type: 'error',
                  showClose: true
                });
              }
            );
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close() {
      this.$router.push({ name: 'StaffList' });
    }
  }

};
</script>

<style lang="scss" scoped>
.nav{
    width: 685px;
    // margin-top: 15px;
    // margin-left: 16px;

}
  .upload_game_img {
    width: 102px;
    height: 102px;
    line-height: 102px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img.border {
    border: 1px dotted #DCDFE6;
  }
  .upload_game_img:hover {
    border-color: #409eff;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: top;
  }
::v-deep.inputRight .el-input__suffix {
    position: absolute;
    height: 100%;
    right: -35px;
    top: 14px;
    text-align: center;
    color: #C0C4CC;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;
}
::v-deep.el-textarea .el-input__count{
      color: #909399;
    background: #FFFFFF;
    position: absolute;
    font-size: 12px;
    bottom: -10px;
    right: -29px;
}
  .imgText {
     margin-top: 64px;
      p{
      font-size: 12px;
      color: #999999;
      font-family: PingFang SC, PingFang SC-Regular;
      margin-left: 18px;
      height: 12px;
      line-height: 12px;
      }

  }
   ::v-deep .el-card__header{
   background-color: rgba(64,158,255,0.06);
   border-bottom: 0px;
   padding-bottom: 0px;
 }
 .anniu{
  margin-left: 50%;
  transform: translateX(-50%);
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}
  .table_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
   .difooter {
  display: inline-block;
  margin-top: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
}
::v-deep .btn{
  margin-top:3px;
  .el-button {
    padding: 0px;
  }
}
</style>
